<template>
    <div>
        <div>{{ num }}</div>
        <button @click="num++">Child>num++</button>
    </div>
  </template>
  
  <script lang='ts' setup>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
  let num=ref(10)
  
  onBeforeMount(()=>{
      console.log("=======Child>onBeforeMount==========")
  })
  onMounted(()=>{
      console.log("=======Child>onMounted==========")
     
  })
  onBeforeUpdate(()=>{
      console.log("=======Child>onBeforeUpdate==========")
  })
  onUpdated(()=>{
      console.log("=======Child>onUpdated==========")
  })
  onBeforeUnmount(()=>{
      console.log("=======Child>onBeforeUnmountnUpdated======")
  })
  onUnmounted(()=>{
      console.group("=======Child>onUnmounted======")
  })
  </script>
  
  <style lang='scss' scoped>
  </style>